<!-- 这是商品列表组件 -->
<template>
    <div class="list-box">
        <router-link :to="'/detail?id='+item.Id" v-for="item,i in list" :key="i">
            <img v-lazy="item.imageUrl" alt />
            <h4>{{item.title}}</h4>
            <p>
                <span class="price">￥{{item.priceStr}}</span>
                <span class="mack" v-html="item.mack"></span>
            </p>
        </router-link>
    </div>
</template>
<script>
    export default {
        name: "GoodList",
        props: ["list"]
    }
</script>
<style scoped>
    .list-box {
        width: 1200px;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
    }

    a {
        width: 220px;
        text-decoration: none;
        color: black;
        text-align: left;
        border: 1px solid lightgray;
        margin: 30px 0 0 17px;
    }

    .price {
        color: orangered;
        font-weight: bolder;
        font-size: 18px;
    }

    img {
        width: 160px;
        height: 160px;
        margin: 20px 30px;
    }

    p {
        line-height: 60px;
    }

    span {
        vertical-align: middle;
    }

    .mack {
        float: right;
    }

    /* v-html 渲染的字符串标签也有样式隔离,需要样式穿透才能修改 */
    .mack>>>span {
        padding: 5px;
    }
</style>